<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>仿照京东侧边栏</title>
    <style>
    	*{margin: 0;padding: 0;}
    	ul {list-style: none;}
    	.top,.dian.jia,.fu,.mei,.bottom{
    		width: 1210px;
    		margin:auto;
    	}
    	.mi-subnav {
    		position: fixed;
    		width: 38px;
    		height: 200px;
    		top: 200px;
    		left: 50%;
    		margin-left: 605px;
    		display: none;
    	}
    	.mi-subnav li {
    		height: 36px;
    		border: 1px solid #DEDEDE;
    		margin-bottom: 5px;
    		font-size: 0;
    		background: url(images/bg.png) no-repeat;
    	}
    	.mi-subnav li:hover,.mi-subnav li.current,.mi-back{
    		border:1px solid #ED5759;
    		background: #FDEEEE;
    		font-size: 12px;
    		color: #ED5759;
    		padding-left: 6px;
    		padding-top:2px;
    		height: 34px;
    		cursor: pointer;
    	}
    </style>
    <script src="../jquery-1.11.1.js"></script>
    <script>
    	$(function(){
    		var num = 0,$subbnav = $(".mi-subnav"),$sideBarMenu =$(".mi-subnav li");
    		$sideBarMenu.each(function(index,ele){
    			num = index *55;
    			console.log(num);
    			$(ele).css("background-position","0 -"+num+"px");
    		});

    		var TOP =0;
    		// 滚动效果
    		$(window).scroll(function(){
    			TOP = $(document).scrollTop();
    			if(TOP >= $(".mei").offset().top){
                    $sideBarMenu.eq(3).addClass("current").siblings().removeClass();
                } else if(TOP >= $(".fu").offset().top){
                    $sideBarMenu.eq(2).addClass("current").siblings().removeClass();
                } else if(TOP >= $(".jia").offset().top){
                    $sideBarMenu.eq(1).addClass("current").siblings().removeClass();
                } else if(TOP >= $(".dian").offset().top){
                    $sideBarMenu.eq(0).addClass("current").siblings().removeClass();
                } else if(TOP > 0){
                    $subbnav.fadeIn();
                }else{
                    $subbnav.fadeOut();
                }
    		});

    		$sideBarMenu.click(function(){
    			$("html,body").stop().animate({
    				"scrollTop":$(".jd").eq($(this).index()).offset().top
    			},1000)
    		});

    		$(".mi-back").click(function(){
    			$("html,body").animate({
    				"scrollTop":0
    			},300)
    		});
    	})
    </script>
</head>

<body>
    <div class="top">
        <img src="images/top.png" alt="" />
    </div>
    <div class="jd dian">
        <img src="images/dian.png" alt="" />
    </div>
    <div class="jd jia">
        <img src="images/jia.png" alt="" />
    </div>
    <div class="jd fu">
        <img src="images/fu.png" alt="" />
    </div>
    <div class="jd mei">
        <img src="images/mei.png" alt="" />
    </div>
    <div class="bottom">
        <img src="images/bottom.png" alt="" />
    </div>
    <div class="mi-subnav">
    	<ul>
    		<li>电脑数码</li>
    		<li>家电通讯</li>
    		<li>服饰精品</li>
    		<li>美容珠宝</li>
    	</ul>
    	<div class="mi-back">返回</div>
    </div>
</body>

</html>
